
.clockIn{
    width: 100%;
    height: 100%;
    position: absolute;
  
    .content{
        // box-sizing: border-box;
        width: 100%;
        height: 100%;
        margin-top: 1rem;
        // padding-top: 2rem;
        padding-bottom: 1rem;
        background: #a1deec url('../../../assets/img/ClockIn/challenge_bg.png');
        background-repeat: no-repeat;
        background-size: 100% auto;
        position: relative;
        .center_box{
            width: 90%;
            padding: 1.5rem 0 0 0;
            background: url('../../../assets/img/ClockIn/center_bg.png') no-repeat;
            background-size: 100%;
            text-align: center;
            position: absolute;
            margin:auto;
            top:24%;
            bottom:0;
            right:0;
            left:0;
            .centent_tit{
                color: #F6F48B;
            }
            .centent_num{
                font-size: 1.2rem;
                color: #FFFFFF;
                margin: 0.7rem;
            }
            .centent_text{
                color: #FFFFFF;
            }
            .centent_btn{
                margin: 1rem auto;
                padding: 0.4rem 0;
                width: 80%;
                background: #F5D15A;
                border-radius: 20rem;
            }
            .centent_card{
                width: 80%;
                margin: 1rem auto;
                border-radius: 0.3rem;
                border: 1px solid 0.5rem;
                background: #d36333;
                .centent_card_tit{
                    background: #c95526;
                    padding: 0.3rem;
                    color: #F6F48B;
                    border-top-left-radius: 0.3rem;
                    border-top-right-radius: 0.3rem;
                }
                .centent_card_rule{
                    display: flex;
                    padding: 0.5rem;
                    span{
                        width: 100%;
                        height: 100%;
                        padding: 0.2rem;
                        img{
                            width: 50%;
                            height: 50%;
                        }
                        p{
                            margin-top: 0.2rem;
                            color: #FFFFFF;
                        }
                    }
                }
            }
        }
    }
    .MyIncome{
        width: 2.5rem;
        height: 0.8rem;
        // border: 1px solid black;
        position: fixed;
        right: 0;
        top: 2.5rem;
        background: #FBDE7A;
        text-align: center;
        line-height: 0.8rem;
        border-top-left-radius: 10rem;
        border-bottom-left-radius: 10rem;
    }
    .Clock_rules{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        background: black;
        background-color:rgba(27, 27, 27, 0.651);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .rules_box{
            background: #FFFFFF;
            width: 70%;
            height: 50%;
            border-radius: 8%;
            padding: 1rem;
            position: relative;
            display: flex;
            justify-content: center;
            div{
                width: 100%;
                word-wrap: break-word;
                word-break: normal;
                overflow: hidden;
                overflow-y: scroll;
                margin-bottom: 1.5rem;
                h5{
                    font-size: 0.6rem;
                    font-weight: 500;
                    text-align: center;
                    color: #333;
                    margin-bottom: 0.5rem;          
                }
                p{
                    font-size: 0.5rem;
                    color: #666;
                }
            }
            .close{
                width: 70%;
                margin-bottom: 0.8rem;
                position: absolute;
                bottom: 0;
                text-align: center;
                background: linear-gradient(227deg, rgb(243, 224, 193) 6%, rgb(228, 190, 142));
                padding: 0.4rem;
                border-radius: 20rem;
                color: black;
                font-size: 0.5rem;
            }
            
        }
    }
    .sign{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        background: black;
        background-color:rgba(27, 27, 27, 0.651);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: black;
        .sign_box{
            background: #FFFFFF;
            width: 70%;
            height: 50%;
            border-radius: 8%;
            padding: 0 0.5rem;
            position: relative;
            display: flex;
            justify-content: center;
            flex-direction: column;
            text-align: center;
            img{
                width: 40%;
            }
            .sign_text{
                margin-top: 0.5rem;
                h5{
                    font-size: 0.4rem;
                    font-weight: bold;
                }
                p{
                    font-size: 0.3rem;
                    margin-top: 0.5rem;
                }
                
            }
            .sign_bin{
                margin-top: 0.5rem;
                background: #F8AD48;
                color: #FFFFFF;
                padding: 0.4rem;
                border-radius: 0.2rem;
                font-size: 0.4rem;
            }
        }
        .sign_prompt{
            margin: 0.5rem;
            color: #FFFFFF;
        }
    }
}